<template>
  <cjui-page-panel :header="t('profile.info.resetPwd')">
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formRules"
      label-position="left"
      label-width="125px"
    >
      <!-- <el-form-item :label="t('profile.password.oldPassword')" required>
        <InputPassword v-model="formModel.oldPassword" />
      </el-form-item>
      <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
        <InputPassword v-model="formModel.newPassword" strength />
      </el-form-item>
      <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
        <InputPassword v-model="formModel.confirmPassword" strength />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="submit(formRef)">{{ t('operate.save') }}</el-button>
        <el-button type="danger" @click="reset(formRef)">{{ t('operate.reset') }}</el-button>
      </el-form-item>
    </el-form>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
// import { InputPassword } from '@/components/InputPassword'

const { t } = useI18n()
const message = useMessage()

const formRef = ref<FormInstance>()
const formModel = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单校验
const equalToPassword = (_rule, value, callback) => {
  if (formModel.newPassword !== value) {
    callback(new Error(t('profile.password.diffPwd')))
  } else {
    callback()
  }
}
const formRules = reactive<FormRules>({
  oldPassword: [
    { required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
    { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
    { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur' },
    { required: true, validator: equalToPassword, trigger: 'blur' }
  ]
})

const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // Todo api
      message.notifySuccess(t('common.updateSuccess'))
    }
  })
}

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
